<template>
  <div class="mail">
    <!-- 左边菜单栏 -->
    <div class="left_tabbar">
      <ul class="left_tabbar_content">
        <li
        @click="seletTabBar(-1)"
        :class="{tabBar_active:tabBar_active_index==-1}"
        >全部</li>
        <li
         @click="seletTabBar(index,val.id)"
          :class="{tabBar_active:tabBar_active_index==index}"
           v-for="(val,index) of goodsClassify" :key="index"
          >{{val.name}}</li>
      </ul>
    </div>
    <!-- 左边菜单栏结束 -->

    <!-- 中间商品列 -->
    <div class="shopList">
      <div class="search">
        <input type="text" placeholder="请输入产品名称" v-model="searchName">
        <img src="../../../static/images/goodsDetails/search.png" alt=""  @click="search">
      </div>
      <div class="shopList_item_wrapper" >
          <div class="shopList_item" v-for="(item,index) of goodsList" :key="index">
              <div class="shopList_item_pic"  @click="toGoodsDetail(item.id)">
                <img :src="item.thumb_Url" alt="" lazy-load=true mode="aspectFill">
              </div>
              <div class="shopList_item_name">
                {{item.name}}
              </div>
              <div class="shopList_item_price">
                ￥{{item.s_price}}
              </div>
        </div>      
      </div>
      
    </div>
    <!-- 中间商品列借宿 -->
  </div>
</template>

<script>
import card from '@/components/card'
export default{
  name:'mail',
  data(){
    return{
      goodsClassify:'',//获取的初始的产品列表数据
      goodsList:[],//商品数据
      tabBar_active_index:-1,
      searchName:'',
      page:0,
      id:''//商品分类id
    }
  },
  onLoad() {
    this.goodsList=[];
    this.page=0;
    this.getGoodsClassify()//获取商品分类
    this.getGoodsList()//获取商品数据
  },
  onReachBottom(){
    this.page++;
    this.getGoodsList(this.id)
  },
     onShareAppMessage(){
     return {
      title: '洽商会商城',
      desc:'洽商会商城',
    }
  },
  methods: {
    seletTabBar(index,id){
      this.tabBar_active_index=index
      this.id=id
      this.goodsList=[]
      this.page=0;
      this.getGoodsList(id)
    },
    async getGoodsList(id,goods_name=''){
      wx.showLoading()
      let res=await this.$request.getData('/goods/getGoodsList',{classify_id:id,'goods_name':goods_name,limit:10,page:this.page,type:'common'})
      if(res.data.level=='success'){
        res.data.data.forEach((val)=>{
          this.goodsList.push(val);
        })
        
        wx.hideLoading()
      }
    },
    async getGoodsClassify(id){
      let res=await this.$request.getData('/goods/getGoodsClassify')
      if(res.data.level=='success'){
        this.goodsClassify=res.data.data
      }
    },
    search(){
      this.goodsList=[];
      this.getGoodsList('',this.searchName)
    },
    toGoodsDetail(id){
      wx.navigateTo({url:'/pages/goodsDetail/main?id='+id})
    }
  },
}

</script>

<style scoped>
.mail{
  background: #eee;
  width: 100%;
  min-height: 100%;
}

/* 左边导航栏 */
.left_tabbar{
  margin-top:2.5px;
  position: fixed;
  top:0;
  left:0;
  width:100px;
}
.left_tabbar_content{
  width:100%;
}
.left_tabbar_content>li{
  background: #eee;
  width:100%;
  border-bottom:solid 2.5px #fff;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.tabBar_active{
  border-left:2px solid red;
  background: #fff !important;
}


/* 中间商品栏 */
.shopList{
  margin-left:100px;
  background: #eee;
}
.search{
  background: #fff;
  margin-bottom:5px;
  display: flex;
  height: 40px;
  align-items: center;
}
.search>input{
  flex:1;
  height:40px;
  text-indent: 10px;
}
.search>img{
  height: 25px;
  margin-right:20px;
  width:25px;
}
.shopList_item_wrapper{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.shopList_item{
  width:45%;
  padding:5px;
  margin-bottom:10px;
  background: #fff;
}
.shopList_item_pic>img{
  width:100%;
  height: 150px;
  /* height: 120px; 先给个固定高度，以后再改 */
}
.shopList_item_name{
  width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin:10px 0;
}
</style>
